<template>
  <div class="addup-container">
    <!-- 总信息 -->
    <div class="an">
      <!-- <span class="title">合计：</span> -->
      <span class="number">{{number}} <span class="unit">件</span> </span>
      <span class="line"></span>
      <span class="amount">{{price | currency}} <span class="unit">元</span></span>
    </div>
    <!-- 已选清单按钮 -->
    <div class="selected">
      <div class="title" :class="{active: showList}" @click="showListFn">已选清单 <span class="gt transition">&gt;</span></div>
      <table class="lists transition" :class="{active: showList}">
        <thead>
          <tr>
            <td>颜色</td><td>总数量</td><td>尺码</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(sku, index) in selectedSkus" v-show="sku.number > 0" :key="index">
            <td style="width: 70px;">{{sku.specpropertyName}}</td>
            <td style="width: 68px;">{{sku.number}}件</td>
            <td class="tal">
              <span v-for="(child, childIndex) in sku.specpropertyList" v-show="child.number > 0" :key="childIndex">{{child.specpropertyName}}（{{child.number}}件）</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="mask" v-if="showList" @click.stop="showList=false"></div>
    <div style="clear: both;"></div>
  </div>
</template>

<script>
export default {
  props: {
    number: {
      type: Number,
      default: 0
    },
    price: {
      type: Number,
      default: 0
    },
    selectedSkus: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      showList: false
    }
  },
  methods: {
    showListFn() {
      // 如果没有选中任何商品，则抛出不操作
      if (!this.selectedSkus || this.selectedSkus.length == 0) {
        return
      }

      // 展示
      this.showList = !this.showList
    }
  }
}
</script>

<style lang="scss" scoped>
.tal {
  text-align: left;

  span {
    margin-right: 20px;
  }
}
.mask {
  background: rgba(0, 0, 0, 0);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
} 
.addup-container {
  background-color: #efefef;
  position: relative;

  .an {
    float: left;
    height: 46px;
    line-height: 46px;
    
    .line {
      background-color: #cccccc;
      display: inline-block;
      width: 1.5px;
      height: 20px;
      margin: 0px 26px -3px;
    }

    .number {
      color: #F00384;
      display: inline-block;
      font-size: 18px;
      width: 120px;
      text-align: right;
    }

    .amount {
      color: #F00384;
      font-size: 18px;
    }

    .unit {
      font-size: 12px;
    }
  }

  .selected {
    border-left: 1px solid #DDDDDD;
    cursor: pointer;
    float: right;
    height: 24px;
    line-height: 24px;
    margin: 11px 0px;
    width: 130px;
    padding-left: 26px;

    .title {
      color: #767676;

      .gt {
        display: inline-block;
      }

      &.active {
        color: #F00384;
        display: block;

        .gt {
          transform: rotate(-90deg);
        }
      }
    }

    .lists {
      background-color: #FFFFFF;
      bottom: 40px;
      border: 1px solid #DDDDDD;
      left: -1px;
      width: calc(100% + 2px);
      position: absolute;
      opacity: 0;
      z-index: -10;

      thead {
        td {
          background-color: #f00385;
          color: white;
        }
      }

      td {
        border: 1px solid #DDDDDD;
        cursor: default;
        height: 30px;
        line-height: 30px;
        text-align: center;
      }

      &.active {
        bottom: 54px;
        opacity: 1;
        z-index: 10;
      }
    }
  }
}
</style>